<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">点我干啥</button>
  <script>
    /*
      箭头函数：
      1. 简写
        1. 当参数只有一个，可以省略小括号
        2. 当函数体只有一句代码，可以省略大括号，此时自带return功能
      2. 特性
        箭头函数内部的this指向上一层函数的this指向
        也就是说，箭头函数自身没有this指向的问题。它内部的this向上看
      3. 什么时候用
        1. 回调函数
        2. 改变this指向的时候
    */
  //  let fn = function(str){
  //    console.log(str)
  //  }

  //  let fn = (str) => {
  //    console.log(str)
  //  }

  //  let fn = str => console.log(str)
  //  fn('hello')

   let add = (x, y) => x + y
  //  console.log(add(10, 20))

  let btn = document.getElementById('btn')
  btn.addEventListener('click', function(){
    // let _this = this
    // setTimeout(function(){
    //   console.log(_this)// Window
    //   console.log(_this.innerText)
    // }, 1000)
    setTimeout(() => {
      console.log(this)
      console.log(this.innerText)
    }, 1000)
  })
  </script>
</body>
</html>